<template>
  <header>
    <router-link class="logo" to="/">
      <r-logo/>
    </router-link>

    <div class="right">
      <div class="m-menu" :active="more ? '' : undefined" @click="more = !more">
        <i></i>
        <i></i>
        <i></i>
      </div>

      <div class="menu" :more="more ? '' : undefined">
        <div class="mask" @click="more = false" @touchmove.prevent @mousewheel.prevent></div>

        <ul>
          <li>
            <router-link to="/">主页</router-link>
            <router-link to="/shop">商品</router-link>
            <router-link to="/my">我的</router-link>
          </li>
        </ul>

        <div class="button">
          <div class="loginstate" :loginstate="$store.state.user.profile.islogin ? undefined : ''">
          <router-link to="/signin" class="signin">登录</router-link>
          <router-link to="/signup" class="signup">注册</router-link>
          </div>
          <div class="loginstate" :loginstate="$store.state.user.profile.islogin ? '' : undefined">
            <div class="signup">用户:{{ formatPhoneNumber($store.state.user.profile.phone_number) }}</div>
          <router-link to="/signin"  @click="logout" class="logout">登出</router-link>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script type="text/javascript">
import { useStore } from 'vuex';
export default {
  name: "r-header",
  setup(){
    const store=useStore();
    const logout= () => {
      store.commit('user/logout')
    };
    return {
      logout,
    };
  },
  data() {
    return {
      more: false,
    }
  },
  props: {
  },
  computed: {
  },
  methods: {
    // 格式化手机号显示
    formatPhoneNumber(phoneNumber) {
      if (!phoneNumber) {
        return '未设置手机号';
      }
      
      // 确保是字符串类型
      const phoneStr = String(phoneNumber);
      
      if (phoneStr.length >= 11) {
        return phoneStr.substring(0, 3) + '****' + phoneStr.substring(7);
      } else {
        return phoneStr; // 如果长度不够，直接显示
      }
    }
  },
  mounted() {
  },
}
</script>

<style lang="scss" scoped>
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1em 2em;
  border-bottom: 1px solid rgb(229 231 235 / 10%);
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);

  .logo {
    svg {
      fill: #fff;
      display: block;
      width: 10em;
    }
  }

  .right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;

    .m-menu {
      cursor: pointer;
      padding: 1em;
      margin: -1em;
      display: none;

      i {
        transition: all .3s;
        width: 1.5em;
        height: 2px;
        background-color: #fff;
        display: block;
        margin-top: 6px;
      }

      &[active] {
        :nth-child(1) {
          transform: translateY(8px) rotate(-45deg);
        }

        :nth-child(2) {
          opacity: 0;
        }

        :nth-child(3) {
          transform: translateY(-8px) rotate(45deg);
        }
      }
    }

    .menu {
      font-weight: 600;
      color: #fff;
      display: flex;
      align-items: center;
      z-index: 9999;

      & > * {
        position: relative;
      }

      .mask {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
      }

      ul {
        li {
          a {
            padding: 1em 1.5em;
          }

          a:hover {
            color: #38bdf8;
          }
        }
      }

      .button {
        & > * {
          cursor: pointer;
          padding: .5em 1em;
          border-radius: .5em;
          font-weight: 600;
          margin-left: 1em;
        }

        .signin {
          border-color: #38bdf8;
          color: #38bdf8;
          background-color: #334155;
          border: 1px solid;
          padding: .5em 1em;
          border-radius: .5em;
          font-weight: 600;
        }

        .signup {
          border-color: rgb(229 231 235 / 10%);
          margin-left:1em;
          color: #fff;
          background-color: #334155;
          border: 1px solid;
          padding: .5em 1em;
          border-radius: .5em;
          font-weight: 600;
        }
        .logout{
           border-color: #38bdf8;
          color: #38bdf8;
          background-color: #334155;
          border: 1px solid;
          padding: .5em 1em;
          border-radius: .5em;
          font-weight: 600;
          margin-left:1em;
        }
        .loginstate{
          display: none;
          &[loginstate] {
            display: flex;
          }
        }
      }
    }

    @media screen and (max-width:660px) {
      .m-menu {
        display: block;
      }

      .menu {
        display: none;
        position: absolute;
        right: 0;
        top: 150%;
        padding: 1em;
        flex-direction: column;
        background-color: #1e293b;
        border-radius: .5em;
        width: max-content;
        border: 1px solid rgb(229 231 235 / 20%);

        ul {
          padding-bottom: 1em;
          border-bottom: 1px solid rgb(229 231 235 / 10%);
          margin-bottom: 1em;
        }

        &[more] {
          display: flex;

          .mask {
            display: block;
          }
        }
        .loginstate{
          display: none;
          &[loginstate] {
            display: flex;
          }
        }
      }
    }
  }
}
</style>
